<template>
    <div ref="right3" class="line-chart-container" style="width: 25%; position: absolute;left:900px;bottom:350px;"></div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
  data() {
    return {
      // 温度和湿度数据 - 使用近4天的日期
      chartData: [
        { date: getRecentDates()[0], temperature: 26, humidity: 65 },
        { date: getRecentDates()[1], temperature: 25, humidity: 68 },
        { date: getRecentDates()[2], temperature: 27, humidity: 62 },
        { date: getRecentDates()[3], temperature: 24, humidity: 70 },
      ],
      dualAxes: null // 存储图表实例
    };
  },
  methods: {
    initChart() {
      const container = this.$refs.right3;
      if (!container) return;
      
      // 销毁已存在的图表实例
      if (this.dualAxes) {
        this.dualAxes.destroy();
      }
      
      // 创建双轴图表实例
      this.dualAxes = new DualAxes(container, {
        // 数据：温度数据和湿度数据
        data: [this.chartData, this.chartData],
        xField: 'date', // x轴使用日期字段
        yField: ['temperature', 'humidity'], // y轴分别对应温度和湿度
        
        // 配置两个轴的样式和范围
        yAxis: [
          {
            name: '温度 (°C)', // 温度轴名称
            min: 20, // 温度最小值
            max: 30, // 温度最大值
          },
          {
            name: '湿度 (%)', // 湿度轴名称
            min: 50, // 湿度最小值
            max: 80, // 湿度最大值
          },
        ],
        
        // 配置两条线的样式
        geometryOptions: [
          {
            geometry: 'line', // 温度线
            color: '#FF8C94', // 温度线颜色（橙色）
            lineStyle: {
              lineWidth: 2,
            },
            point: {
              size: 5,
              fill: '#FF8C94',
            },
          },
          {
            geometry: 'line', // 湿度线
            color: '#4E89FF', // 湿度线颜色（蓝色）
            lineStyle: {
              lineWidth: 2,
            },
            point: {
              size: 5,
              fill: '#4E89FF',
            },
          },
        ],
        
        // 图表标题
        title: {
          text: '近4天温度湿度趋势',
          style: {
            fontSize: 14,
          },
        },
        
        // 图例配置
        legend: {
          position: 'top',
          items: [
            { name: '温度', value: 'temperature', marker: { symbol: 'circle', fill: '#FF8C94' } },
            { name: '湿度', value: 'humidity', marker: { symbol: 'circle', fill: '#4E89FF' } },
          ],
        },
      });
      
      // 渲染图表
      this.dualAxes.render();
    }
  },
  mounted() {
    // 组件挂载后初始化图表
    this.initChart();
  },
  beforeDestroy() {
    // 组件销毁前清理图表实例
    if (this.dualAxes) {
      this.dualAxes.destroy();
    }
  }
};
// 生成近4天的日期数据（包含今天）
const getRecentDates = () => {
  const dates = [];
  const today = new Date();
  
  for (let i = 3; i >= 0; i--) {
    const date = new Date();
    date.setDate(today.getDate() - i);
    // 格式化日期为YYYY-MM-DD
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    dates.push(`${year}-${month}-${day}`);
  }
  
  return dates;
};
</script>

<style scoped>
.line-chart-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  margin-top: 20px;
}
.line-chart-container {
  width: 389px;
  height: 200px;
  border-radius: 10px;
  box-sizing: border-box;
  padding: 10px;
}
</style>
    